<template>
  <div>
    <Row :gutter="20">
      <Col span="18">
        <sanjiao-chart-bar
            style="height: 650px"
            :text="XueKetext"
            :value="chart_bar_data10"
            :xData="xData10"
            :loading="loading"
            :position="position"
          ></sanjiao-chart-bar>
      </Col>
      <Col span="5">
        <Form label-position="top" class="inputs">
          <Divider orientation="left">图表名称</Divider>
          <div style="margin-bottom: 40px">
            <FormItem>
              <Input v-model="XueKetext" placeholder="请输入图表名称" />
            </FormItem>
          </div>
          <div style="margin-bottom: 40px">
            <Divider orientation="left">机构名称</Divider>
            <draggable v-model="chart_bar_data10">
              <transition-group>
                <FormItem
                  v-for="(item, index) in chart_bar_data10"
                  :key="index"
                >
                  <Input v-model="item.name"></Input>
                </FormItem>
              </transition-group>
            </draggable>
            <Divider orientation="left">中间值显示位置</Divider>
            <!-- top,insideTop,inside,insideLeft,insideRight -->
            <FormItem>
              x轴值0-100：<Input placeholder="x轴值" v-model="position.X" />y轴值0-100：<Input v-model="position.Y" placeholder="y轴值"/>
            </FormItem>
          </div>
        </Form>
      </Col>
    </Row>
  </div>
</template>

<script>
import SanjiaoChartBar from "@/components/charts/sanjiao.vue";
import draggable from 'vuedraggable'
export default {
  name: "triangle",
  components: {
    SanjiaoChartBar,
    draggable
  },
  data() {
    return {
      loading: false,
      position: {X:50,Y:10},
      XueKetext: 'bar图表名称',
      xData10: { 消费: "消费", 房产: "房产", 重工业: "重工业" },
      chart_bar_data10: [
        { name: "上海", value: [5, 25, 30] },
        {
          name: "北京",
          value: [4, 10, 13],
        },
      ],
    };
  },
  methods: {},
  mounted() {},
};
</script>
